<template>
  <div>
    <div class="center-box">
      <div class="bq">
        <Icon type="ios-game-controller-b-outline" /><span>社区</span>
      </div>
      <!-- 抬头 -->
      <div class="center-top">
        <div class="header">
          <div class="header-but">
            <img class="header-person" src="./ren.png" alt="" />
            <div class="header-right">
              <div class="header-name">
                <div>
                  <span class="header-one">张写龙</span>
                  <img src="./ok.png" alt="" />
                </div>
                <div><span class="header-two">运动员</span></div>
                <div>
                  <span class="header-thir"> 粉丝 : </span><span>205</span>
                  <span class="header-thir"> 粉丝 : </span><span>205</span>
                  <span class="header-thir"> 粉丝 : </span><span>205</span>
                </div>
              </div>
              <div class="header-bq">
                <Icon type="ios-add-circle-outline" /><span>关注</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 内容 -->
      <div
        class="center"
        v-for="item in data"
        :key="item.id"
        @click="handleDetail(item)"
      >
        <div class="container">
          <div class="container-top">
            <div class="container-top-img">
              <img :src="item.header" alt="" @click="toHeader(item)" />
            </div>
            <div class="container-top-center">
              <div class="container-top-true">
                <div class="container-top-title">
                  <div class="container-top-one">
                    <span>{{ item.name }}</span>
                    <div class="container-lable-yd">
                      <span>{{ item.lab }}</span>
                    </div>
                  </div>
                  <div class="container-top-two">{{ item.time }}</div>
                </div>
                <div class="container-contoin">{{ item.contain }}</div>
                <div class="main-container" v-if="item.statu == 1">
                  <img class="main-img" src="@/assets/header.jpg" alt="" />
                  <img class="main-img" src="@/assets/header.jpg" alt="" />
                  <img class="main-img" src="@/assets/header.jpg" alt="" />
                  <img class="main-img" src="@/assets/header.jpg" alt="" />
                  <img class="main-img" src="@/assets/header.jpg" alt="" />
                </div>
                <div v-if="item.statu == 2" class="container-video">
                  <video class="video-bb" :src="item.video"></video>
                </div>
              </div>
            </div>
          </div>
          <div class="container-but">
            <div class="ribbon">
              <Icon type="ios-star-outline" /> <span>{{ item.one }}</span>
            </div>
            <div class="ribbon">
              <Icon type="ios-share-outline" /> <span>{{ item.two }}</span>
            </div>
            <div class="ribbon">
              <Icon type="ios-text-outline" /> <span>{{ item.thire }}</span>
            </div>
            <div class="ribbon npk">
              <Icon type="ios-thumbs-up-outline" /> <span>{{ item.fov }}</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 内容结束 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          id: "1",
          header: require("@/assets/communityimg/click (2).png"),
          name: "哈哈哈哈哈",
          lab: "运动员",
          time: "2022-09-12 12:00",
          contain:
            "上班路上再骑一次回到平时骑到的原地，21日刚刚过去的21日，学校就随便推荐一辆普通的公路，33日可能所有所以的就没有去出去，推荐给所有的人",
          children: [
            { id: "1", img: require("@/assets/header.jpg") },
            { id: "2", img: require("@/assets/header.jpg") },
            { id: "3", img: require("@/assets/header.jpg") },
          ],
          statu: "1",
          one: "10",
          two: "11",
          thire: "12",
          fov: "13",
        },
        {
          id: "2",
          header: require("@/assets/communityimg/click (2).png"),
          name: "哈哈哈哈哈",
          lab: "前端狗",
          time: "2022-09-12 12:00",
          contain:
            "21日刚刚过去的21日，学校上班路上再骑一次回到平时骑到的原地，就随便推荐一辆普通的公路，33日可能所有所以的就没有去出去，推荐给所有的人",
          video: require("../../assets/styles/02_2pc介绍.mp4"),
          statu: "2",
          one: "14",
          two: "15",
          thire: "16",
          fov: "17",
        },
      ],
    };
  },
  methods: {
    // 跳转详情
    handleDetail(item) {
      this.$router.push({
        path: "/comment",
        query: {
          id: item.id,
        },
      });
    },
    // 跳转至个人中心
    toHeader(item) {
      this.$router.push({
        path: "/personalpage",
        query: {
          id: item.id,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
body {
  background-color: #929292;
}
.center-box {
  width: 545px;
  // height: 400px;
  border: 1px solid rgb(73, 11, 11);
  margin: 0 auto;

  .bq {
    span {
      margin-left: 10px;
    }
  }
  .center-top {
    width: 545px;
    // height: 900px;
    background: #ffffff;
    border-radius: 6px;
    // border: 1px solid red;
    .header {
      width: 545px;
      height: 220px;
      background: #980707;
      border-radius: 6px;
      background: url(./fcz.jpeg);
      display: flex;
      align-items: flex-end;
      border-radius: 6px;
      margin-bottom: 12px;
      .header-but {
        width: 100%;
        height: 68px;
        // border: 1px solid red;
        display: flex;
        justify-content: flex-end;
        position: relative;
        background-color: #fff;
        .header-person {
          width: 66px;
          height: 66px;
          border-radius: 50%;
          position: absolute;
          top: -30px;
          left: 23px;
        }
        .header-right {
          width: 443px;
          height: 100%;
          // border: 1px solid red;
          display: flex;
          flex-wrap: wrap;
          color: #202020;
          img {
            width: 8px;
            height: 10px;
          }
          .header-name {
            .header-one {
              font-size: 10px;
            }
            .header-two {
              color: #929292;
              font-size: 8px;
            }
            .header-thir {
              color: #929292;
              font-size: 8px;
            }
          }
          .header-bq {
            width: 50px;
            height: 19px;
            background: #dedede;
            border-radius: 10px;
            position: absolute;
            right: 20px;
            top: 23px;
            text-align: center;
            line-height: 19px;
            font-size: 9px;
          }
          // background-color: #980707;
        }
      }
    }
  }
  // 内容样式
  .center {
    width: 100%;
    // height: 500px;
    // border: 1px solid red;
    // background-color: #FD5151;
    margin-bottom: 9px;
    .container {
      width: 100%;
      // height: 350px;
      // border: 1px solid rgb(27, 98, 213);
      border-radius: 6px;
      background-color: #fff;

      .container-top {
        width: 100%;
        height: calc(350px - 36px);
        // border: 1px solid red;
        padding-top: 12px;
        display: flex;
        justify-content: flex-start;
        .container-top-img {
          width: 28px;
          height: 100%;
          margin-left: 12px;
          > img {
            width: 28px;
            height: 28px;
            border-radius: 50%;
          }
        }
        .container-top-center {
          width: 100%;
          height: 100%;
          // background-color: rgb(43, 12, 12);
          padding-right: 45px;
          .container-top-true {
            width: 100%;
            height: 100%;
            // background-color: rgb(26, 44, 162);
            .container-top-title {
              width: 100%;
              height: 38px;
              // border: 1px solid red;
              display: flex;
              flex-wrap: wrap;
              margin-bottom: 9px;
              .container-top-one {
                width: 100%;
                height: 14px;

                font-size: 8px;
                font-weight: 500;
                color: #333333;
                display: flex;
                align-items: center;
                justify-content: flex-start;

                .container-lable-yd {
                  width: auto !important;
                  padding: 0 6px;
                  height: 11px;
                  background: #fcf0f0;
                  border-radius: 2px;
                  width: 20px;
                  font-size: 7px;
                  font-weight: 400;
                  color: #fd5151;
                  line-height: 11px;
                  margin-left: 10px;
                }
              }
              .container-top-two {
                width: 100%;
                height: 14px;
                font-size: 7px;

                font-weight: 400;
                color: #acacac;
              }
            }
            .container-contoin {
              margin-bottom: 12px;
              font-size: 8px;
              font-weight: 400;
              color: #333333;
              line-height: 14px;
              // border: 1px solid red;
            }
            .main-container {
              width: 100%;
              min-height: 0px;
              // background-color: #FD5151;
              display: flex;
              flex-wrap: wrap;
              .main-img {
                width: 32%;
                display: inline-block;
                height: 86px;
                background: #dedede;
                object-fit: scale-down;
                border-radius: 3px;
                margin-bottom: 7px;
              }
            }
            .container-video {
              width: 100%;
              height: 313px;
              .video-bb {
                width: 100%;
                max-height: 200px;
              }
            }
          }
        }
      }
      .container-but {
        widows: 100%;
        // background-color: rgb(49, 103, 197);
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-top: 1px solid #ececec;
        .ribbon {
          width: 25%;
          height: 100%;
          text-align: center;
          display: flex;
          align-items: center;
          justify-content: center;
          border-right: 1px solid #ececec;
        }
        .npk {
          border-right: none;
        }
      }
    }
  }
}
</style>
